<style>

    .balls{
        border-radius: 50%;
        background: linear-gradient(
            35deg,
            #ccffff,
            #ffcccc
        );
        position: fixed;
        width: 50px;
        height: 50px;
        margin-top: 50px;
        animation-name: bounce;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    #ball1 {
        left: 27%;
        animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    }
    #ball2 {
        left: 56%;
        animation-timing-function: ease-out;
    }

    @keyframes bounce {
        0% {
            top: 0px;
        }
        100% {
            top: 249px;
        }
    }

</style>

<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>